<template>
  <div class="page" style="height: calc(100vh - 125px)">
    <div class="page-brand">自动回复</div>
    <div class="g-card container flex-v">
      <el-table
        ref="mainTable"
        :data="tableData"
        tooltip-effect="light"
        style="width: 100%"
        size="mini"
        class="f1"
        header-row-class-name="mao-table-head"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="title" label="策略名称" width="220" />
        <el-table-column prop="keywords" label="关键词" width="240" />
        <el-table-column prop="createTime" label="生效时间" />
        <el-table-column prop="status" label="启用/关闭">
          <template slot-scope="data">
            <el-switch v-model="data.row.status" />
          </template>
        </el-table-column>
        <el-table-column prop="todo" label="操作" width="150">
          <a
            href="javascript:;"
            style="margin-right: 10px"
            class="link"
          >编辑</a>
          <a href="javascript:;" class="link">删除</a>
        </el-table-column>
      </el-table>
      <div class="flex-b align-center w-100" style="margin-top: 20px;bottom:15px;box-sizing: border-box;">
        <el-checkbox v-model="checkAll">选择全部</el-checkbox>
        <div class="flex-e align-center">
          <el-button size="small" type="danger">删除</el-button>
          <el-button size="small" type="primary">新建策略</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      checkAll: false,
      tableData: [
        {
          title: '3024-2-28新建策略',
          keywords: '多少钱，怎么买，怎么联系',
          createTime: '2024-03-28 10:54:11',
          status: true
        }
      ]
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedList = val
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
